<template>
  <div class="main">
    <div class="saleing">
      <div class="title disflex">
        <h2>发布出售商品</h2>
        <!-- <a>查看更多</a> -->
      </div>
      <el-row class="bgfff" style="padding:20px;margin-bottom:20px;">
        <el-form ref="form" :inline="true" :model="form" size="small" label-width="80px">
          <el-divider content-position="left">产品参数</el-divider>
          <el-form-item label="类型">
            <el-select v-model="form.region" placeholder="请选择类型">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="品牌">
            <el-select v-model="form.region" placeholder="请选择品牌">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="燃烧种类">
            <el-select v-model="form.region" placeholder="请选择燃烧种类">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="介质">
            <el-select v-model="form.region" placeholder="请选择介质">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="吨位">
            <el-select v-model="form.region" placeholder="请选择吨位">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="商品名称">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-divider content-position="left">产品参数</el-divider>
          <el-form-item label="身份证">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="生产日期">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              v-model="form.date1"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="交货周期">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="出货地">
            <el-select v-model="form.region" style="width:120px;" placeholder="请选择省份">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <el-select v-model="form.region" style="width:120px;" placeholder="请选择市区">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
            <el-select v-model="form.region" style="width:120px;" placeholder="请选择乡镇">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.name" placeholder="请输入详细地址"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input v-model="form.name" placeholder="请输入联系方式"></el-input>
          </el-form-item>
          <el-divider content-position="left">其他参数</el-divider>
          <el-form-item label="参考价格">
            <el-input v-model="form.name" placeholder="请输入参考价格"></el-input>
          </el-form-item>
          <el-form-item class="ms" label="描述" style="width:100%;">
            <el-input type="textarea" rows="8" style="width:100%;" v-model="form.desc"></el-input>
          </el-form-item>
          <el-divider content-position="left">缩略图</el-divider>
          <el-form-item style="width:100%;">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt>
            </el-dialog>
          </el-form-item>
          <el-divider content-position="left">商品照片</el-divider>
          <el-form-item style="width:100%;">
            <el-upload
              action="https://jsonplaceholder.typicode.com/posts/"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt>
            </el-dialog>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
          </el-form-item>
        </el-form>
      </el-row>
    </div>
    <!-- saleing --end -->
  </div>
</template>
<script>
// import configs from "../config.js";

export default {
  components: {},
  data() {
    return {
      form: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: ""
      },
      dialogImageUrl: "",
      dialogVisible: false
    };
  },
  computed: {},
  mounted() {},
  created() {},

  methods: {
    onSubmit() {
      console.log("submit!");
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    }
  },

  mounted() {}
};
</script>
<style scoped lang="scss">
</style>
